var user = document.querySelector('.user');                      //获取姓名
var age = document.querySelector('.age');                        //获取年龄
var height = document.querySelector('.height');                  //获取身高
var tellphone = document.querySelector('.tellphone');            //获取电话



user.addEventListener('blur', function () {

    //验证姓名
    if (!this.value) {
        console.log(this.parentNode);
        if (this.nextElementSibling) {
            return
        }
        let p = document.createElement('p');
        p.textContent = "姓名不能为空"
        this.parentNode.appendChild(p);
        apply_btn.disabled = true

    } else {
        if (this.nextElementSibling) {
            this.nextElementSibling.remove()
        }
        apply_btn.disabled = false

    }
})


age.addEventListener('blur', function () {
    //验证年龄
    if (this.value < 10 || this.value > 100) {
        console.log(this.parentNode);
        if (this.nextElementSibling) {
            return
        }
        let p = document.createElement('p');
        p.textContent = "年龄不能小于10且不大于100"
        this.parentNode.appendChild(p);
        apply_btn.disabled = true

    } else {
        if (this.nextElementSibling) {
            this.nextElementSibling.remove()
        }
        apply_btn.disabled = false

    }

})


height.addEventListener('blur', function () {
    // 验证身高
    if (!this.value) {
        if (this.nextElementSibling) {
            return
        }
        let p = document.createElement('p');
        p.textContent = "身高不能为空"
        this.parentNode.appendChild(p);
        apply_btn.disabled = true

    } else {
        if (this.nextElementSibling) {
            this.nextElementSibling.remove()
        }
        apply_btn.disabled = false
    }

})


tellphone.addEventListener('blur', function () {


    // 验证手机号
    if (!(this.value.length == 11)) {
        if (this.nextElementSibling) {
            return
        }
        let p = document.createElement('p');
        p.textContent = "电话能为11位数"
        this.parentNode.appendChild(p);
        apply_btn.disabled = true

    } else {
        if (this.nextElementSibling) {
            this.nextElementSibling.remove()
        }
        apply_btn.disabled = false
    }

})

// 验证年龄
//         if (k == "age" && this.value < 10 || this.value > 100) {
//             if (this.nextElementSibling) {
//                 return
//             }
//             let p = document.createElement('p');
//             p.textContent = "年龄不能小于10且不大于100"
//             this.parentNode.appendChild(p);
//             apply_btn.disabled = true

//         } else {
//             if (this.nextElementSibling) {
//                 this.nextElementSibling.remove()
//             }
//             apply_btn.disabled = false

//         }
// 验证身高
// if( k == "height" && !this.value){
//     if(this.nextElementSibling){
//         return
//     }
//     let p = document.createElement('p');
//     p.textContent = "身高不能为空"
//     this.parentNode.appendChild(p);
//     apply_btn.disabled = true

// }else{
//     if(this.nextElementSibling){
//         this.nextElementSibling.remove()
//     }
//     apply_btn.disabled = false

// }


// // 验证手机号
// if( k == "height" && !this.value.length == 11){
//     if(this.nextElementSibling){
//         return
//     }
//     let p = document.createElement('p');
//     p.textContent = "电话能为11位数"
//     this.parentNode.appendChild(p);
//     apply_btn.disabled = true

// }else{
//     if(this.nextElementSibling){
//         this.nextElementSibling.remove()
//     }
//     apply_btn.disabled = false

// }0


var apply_btn = document.querySelector('.apply_btn');            //获取按钮
var table = document.querySelector('table');                     //获取表格

var flag = 1;
apply_btn.addEventListener('click', function () {
    if (flag == 1) {
        var tr = document.createElement('tr');
        tr.style.backgroundColor = 'rgb(230,230,230)'
        flag = 0
    } else {
        var tr = document.createElement('tr');
        tr.style.backgroundColor = 'rgb(122,210,248)'
        flag = 1
    }
    //创建tr                                                //tr中添加td和内容
    tr.innerHTML = `                                           
                                <td>${user.value}</td>
                                <td>${age.value}</td>
                                <td>${height.value}</td>
                                <td>${tellphone.value}</td>
                                <td>删除</td>
                                                         
                               `;
    var del = tr.children[tr.children.length - 1];             //获取tr子集中最后的td删除
    del.style.cursor = 'pointer'
    del.style.textAlign = 'center'
    console.log(del);
    del.addEventListener('click', function () {               //给tr子集中最后的td删除设置点击事件
        this.parentNode.remove()                              //删除td删除的父级tr
    })
    table.appendChild(tr);                                    //给table表格中添加子元素tr
})
